<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 练习 -->
    <!-- 除了列出的3种语言外，请再添加Pascal、Lua和Ruby，然后按字母顺序排序节点： -->
    
    <!-- HTML结构 -->
    <div id="test-div">
        <ul>
            <li><span>JavaScript</span></li>
            <li><span>Python</span></li>
            <li><span>Swift</span></li>
        </ul>
    </div>

    <script src="./jquery-3.6.0.min.js"></script>

    <script>
    'use strict';
    var div=$('#test-div ul');

    div.append('<li><span>Pascal</span></li>');
    div.append('<li><span>Lua</span></li>');
    div.append('<li><span>Ruby</span></li>');
    // 转换jQuery.div里的ul层为数组，元素为li；
    var sortArry=div.map(function() {
        // console.log(this.innerText);
        return this.innerText;
    }).get();
    // 得到DOM数组
    console.log(sortArry);
    // 想尽办法把数组转换到能够使用排序函数，再转换回jQuery对象输出
    var nweArryone=sortArry.join('\n');

    var nweArrytwo=nweArryone.split('\n');
    var sortArry=nweArrytwo.sort();
    // 为了方便后面插入不重复，清空div
    div.html('');
    //利用数组遍历的iterable类型可使用的foreach()方法插入
    var hh=sortArry.forEach(index=>{
        var ononon='<li><span>'+index+'</span></li>';
        div.append(ononon);
        return $(div);
    });
    // 测试:
    ;(function () {
        var s = $('#test-div>ul>li').map(function () {
            return $(this).text();
        }).get().join(',');
        if (s === 'JavaScript,Lua,Pascal,Python,Ruby,Swift') {
            console.log('测试通过!');
        } else {
            console.log('测试失败: ' + s);
        }
    })();
    </script>
</body>
</html>